﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>gfy</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            $("#query").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "http://localhost:3862/cats.json",
                        dataType: "jsonp",
                        data: {
                            q: request.term,
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.EnglishName + " (" + item.LatinName + ")",
                                    value: item.EnglishName + " (" + item.LatinName + ")"
                                }
                            }))
                        },
                        error: function (a, b, c) {

                        }
                    })
                },
                select: function (event, ui) {

                },
                minLength: 2,
                delay: 300
            });
        });
    </script>
    <div>
        <div>
            <label for="query">
                Cat species
            </label>
            <input id="query" />
        </div>
    </div>
</body>
</html>
